<template>
  <div>
    采购发票页面<br/><br/>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="purOrderVO" class="demo-form-inline">
        <!-- 查询条件 -->
        <el-col :span="6">
        <el-form-item label="订单编号" >
          <el-input v-model="purOrderVO.ordernum" placeholder="请输入订单编号"  ></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="供应商">
          <el-select v-model="purOrderVO.supplier.sid" placeholder="请选择" clearable>
            <el-option v-for="item in suppliers" :key="item.sid" :label="item.sname" :value="item.sid" ></el-option>  
          </el-select>
        </el-form-item>
        </el-col>
        
        <el-form-item label="要求交期">
          <el-date-picker v-model="purOrderVO.startdate" type="date" placeholder="选择开始日期"></el-date-picker>
          &nbsp;
          <el-date-picker v-model="purOrderVO.enddate" type="date" placeholder="选择结束日期"></el-date-picker>
        </el-form-item>
        
        <el-col :span="6">
        <el-form-item label="合计范围" class="priceFormItem" prop="minisummoney">
          <el-input v-model="purOrderVO.minsummoney" class="priceInput" style="width: 70px; margin-right: 20px"/>-
          <el-input v-model="purOrderVO.maxsummoney" class="priceInput" ref="maxsummoney" style="width: 70px; margin-left: 20px"/>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="交货方式">
          <el-select v-model="purOrderVO.deliverytype" placeholder="请选择交货方式">
            <el-option label="不限" value=""></el-option>
            <el-option label="送货" value="送货"></el-option>
            <el-option label="邮寄" value="邮寄"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="订单状态">
          <el-select v-model="purOrderVO.orderstatus" placeholder="请选择订单状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未入库" value="未入库"></el-option>
            <el-option label="待入库" value="待入库"></el-option>
            <el-option label="已入库" value="已入库"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="付款状态">
          <el-select v-model="purOrderVO.paystatus" placeholder="请选择付款状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未付款" value="未付款"></el-option>
            <el-option label="部分付款" value="部分付款"></el-option>
            <el-option label="全部付款" value="全部付款"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="开票状态">
          <el-select v-model="purOrderVO.invoicestatus" placeholder="请选择开票状态">
            <el-option label="不限" value=""></el-option>
            <el-option label="未开发票" value="未开发票"></el-option>
            <el-option label="部分开票" value="部分开票"></el-option>
            <el-option label="全部开票" value="全部开票"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getAllInvoiceButton">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item><br/>
        </el-col>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="pageBean.beanList" style="widtindexh: 100%" :filter-method="filterHandler" :default-sort = "{prop: 'ordernum', order: 'descending'}">
        <el-table-column fixed type="index" label="序号" width="55" :index="Nindex"></el-table-column>
        <el-table-column fixed prop="ordernum" label="订单编号" width="170" sortable></el-table-column>
        <el-table-column fixed prop="supplier.sname" label="供应商名称" width="190"></el-table-column>
        <el-table-column prop="orderdate" label="订货日期" width="120"></el-table-column>
        <el-table-column prop="demanddelivery" label="要求交期" width="120"></el-table-column>
        <el-table-column prop="summoney" label="合计" width="120"></el-table-column>
        <el-table-column prop="deliverytype" label="交货方式" width="140"></el-table-column>
        <el-table-column prop="orderstatus" label="订单状态" width="100"
           :filters="[{ text: '未入库', value: '未入库' }, { text: '待入库', value: '待入库' },{ text: '已入库', value: '已入库' }]" :filter-method="filterOrderstatus" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.orderstatus === '已入库' ? 'success' : scope.row.orderstatus === '待入库' ? 'primary' : 'danger'" disable-transitions>{{scope.row.orderstatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paystatus" label="付款状态" width="100"
          :filters="[{ text: '未付款', value: '未付款' }, { text: '部分付款', value: '部分付款' },{ text: '全部付款', value: '全部付款' }]" :filter-method="filterPaystatus" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.paystatus === '全部付款' ? 'success' : scope.row.paystatus === '部分付款' ? 'primary' : 'danger'" disable-transitions>{{scope.row.paystatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paystatus" label="发票状态" width="100"
          :filters="[{ text: '未开发票', value: '未开发票' }, { text: '部分开票', value: '部分开票' },{ text: '全部开票', value: '全部开票' }]" :filter-method="filterInvoicestatus" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.invoicestatus === '全部开票' ? 'success' : scope.row.invoicestatus === '部分开票' ? 'primary' : 'danger'" disable-transitions>{{scope.row.invoicestatus}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" width="120" show-overflow-tooltip></el-table-column> 
        <el-table-column prop="createdate" label="创建时间" width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary"  plain @click="performInvoiceOperation(scope.$index, scope.row)">开发票</el-button>
            <!-- <el-button type="primary" plain @click="orderDetail(scope.$index, scope.row)">详情</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑采购付款模态框，弹出层 -->
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <!-- 采购订单详情 -->
      <el-form :rules="rules" :model="purInvoice" ref="purInvoice"  label-width="80px"  :inline="true" class=“demo-form-inline v-if="dialogFormTitle=='编辑采购发票'">
        <!-- 自动生成订单号，并传入到数据库中 -->
        <el-form-item label="订单编号" class="search-param-label"> 
          <el-input v-model="purInvoice.ordernum"  clearable disabled class="search-param-item"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="purInvoice.supplier.sid" filterable placeholder="请选择" clearable disabled>
            <el-option v-for="item in suppliers" :key="item.sid" :label="item.sname" :value="item.sid" ></el-option>  
          </el-select>
        </el-form-item>
        <el-form-item label="订货日期" >
          <el-date-picker v-model="purInvoice.orderdate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" disabled ></el-date-picker><!--:picker-options="pickerOptionsStart"-->
        </el-form-item>
        <el-form-item label="要求交期" >
          <el-date-picker v-model="purInvoice.demanddelivery" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"  disabled></el-date-picker><!--:picker-options="pickerOptionsEnd"-->
        </el-form-item>
        <el-form-item label="合计(元)" class="search-param-label" >
          <!-- 根据单价、数量、税率计算合计金额 -->
          <el-input v-model="purInvoice.summoney" clearable  disabled class="search-param-item" />
        </el-form-item>
        <el-form-item label="交货方式" >
          <el-radio-group v-model="purInvoice.deliverytype" disabled>
            <el-radio label="送货"></el-radio>
            <el-radio label="邮寄"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="notes" >
          <el-input type="textarea" v-model="purInvoice.notes" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品"  >
          <el-select v-model="purInvoice.purGoods.gid" filterable placeholder="请选择商品" clearable disabled >
            <el-option v-for="item in purGoodss" :key="item.gid" :label="item.gname" :value="item.gid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位" >
          <el-select v-model="purInvoice.productUnit" placeholder="请选择单位" disabled> 
            <el-option label="瓶" value="瓶"></el-option>
            <el-option label="袋" value="袋"></el-option>
            <el-option label="箱" value="箱"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单价(元)" >
          <el-input v-model.number="perprice" v-model="purInvoice.perprice" disabled></el-input>
        </el-form-item>
        <el-form-item label="数量"  @keyup.native="ceshi(this)" >
          <el-input v-model.number="amount" v-model="purInvoice.amount" disabled></el-input>
        </el-form-item>
        <el-form-item label="税率(%)" >
          <el-input v-model="purInvoice.taxrate" disabled></el-input>
        </el-form-item>
        <el-form-item label="价税合计" >
          <el-input v-model.number="summoney" v-model="purInvoice.summoney" clearable  disabled class="search-param-item" />
        </el-form-item>
        <el-form-item label="已开票金额" prop="invoiced">
          <el-input v-model.number="invoiced" v-model="purInvoice.invoiced" ></el-input>
        </el-form-item>
        <el-form-item label="未开票金额" prop="uninvoice">
          <el-input  v-model="uninvoice" clearable  readonly class="search-param-item"></el-input>
        </el-form-item>
        <el-form-item label="开票日期" prop="sinvicedate">
          <el-date-picker v-model="purInvoice.sinvicedate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"  ></el-date-picker>
        </el-form-item>
        <el-form-item label="票种" prop="tickettype">
          <el-select v-model="purInvoice.tickettype" placeholder="请选择" > 
            <el-option label="电子发票" value="电子发票"></el-option>
            <el-option label="纸质发票" value="纸质发票"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票号" >
          <el-input v-model="generateInvoiceNumber"  clearable disabled class="search-param-item"></el-input>
        </el-form-item>
        <el-form-item label="发票状态" prop="invoicestatus">
          <el-radio-group v-model="purInvoice.invoicestatus" >
            <el-radio label="未开发票"></el-radio>
            <el-radio label="部分开票"></el-radio>
            <el-radio label="全部开票"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyPay()">确 定</el-button>
        <!-- <el-button type="primary" @click="addOrder(generateOrderNumber)">确 定</el-button> -->
      </div>
    </el-dialog>

    <!-- 分页控件 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord">
      </el-pagination>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    //校验单价
    const twoPoint = (rule, value, callback) => {
      if(/^\d+\.?\d{0,2}$/.test(value)){
        if(value.indexOf('.')=='-1'&&value.length>1&&value.slice(0,1)=='0'){
          callback(new Error("最多包含两位小数的正数且不能为以0开头的正整数"));
        }
      }else{
        callback(new Error("最多包含两位小数的正数且不能为以0开头的正整数"));
      }
    };
    return {
      //定义验证规则
      rules: {  
        invoice:[
          {required: true, message: "请输入开票金额", trigger: "blur,change"},
          { min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur,change' },
          { validator: twoPoint, message: '最多包含两位小数的正数且不能为以0开头的正整数', trigger: 'blur' }
          ],
        sinvicedate: [{required: true, message: '请输入订货日期', trigger: 'blur'}],
        tickettype:[{required: true,message: '请选择票种', trigger: 'blur'}], 
        invoicestatus:[{required: true, message: '请选择发票状态', trigger: 'blur' }],
      },
      
      dialogFormTitle:"",
      sample: {},
      pageBean: [],
      pageIndex: 1,
      pageSize: 5,
      purOrderVO: {supplier:{sid:null},purGoods:{gid:null}},
      suppliers:[],
      purInvoice:{ supplier:{sid:null}, purGoods:{gid:null}},
      purGoodss:[{gid:null,perprice:null,productUnit:null}],
      perprice: '', 
      amount: '', 
      dialogFormVisible: false,
      
      
      
      //pages: ""
    };
  },
  mounted() {
    this.getAllInvoice();
    this.getAllSupplier();
    this.getAllPurGoods();
  },
  computed:{

    // //计算合价
    // summoney() {
    //   if (this.purInvoice.perprice === '' && this.purInvoice.amount === '' ) {
    //     return 0
    //   } else {
    //     return Number(this.purInvoice.perprice) * Number(this.purInvoice.amount) * Number(this.purInvoice.taxrate*0.01+1.00)
    //   }
    // },
    uninvoice(){
        if(this.purInvoice.invoiced ===''){
          return this.purInvoice.summoney;
        }else{
          return Number(this.purInvoice.summoney) - Number(this.purInvoice.invoiced);
        }
      },
    //自动生成发票号
    generateInvoiceNumber() {
      const date = new Date();
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      //const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
      return `FP-${year}${month}${day}${hours}${minutes}${seconds}`;
    },
  },
  methods: {
    performInvoiceOperation(index,row) {
      if (row.paystatus === '未付款') {
        alert('该商品不处于未付款状态，不能进行开发票操作。');
      } else {
        // 实现开发票的逻辑
        console.log('开发票操作执行');
         this.dialogFormVisible = true;
        this.dialogFormTitle = "编辑采购发票";
        //浅拷贝，将row行的数据拷贝到smapleModify中
        this.purInvoice = { ...row };
        //this.modifyPay();
        
      }
    },
  
    //校验正整数
    ceshi(val){
        this.purInvoice.amount = this.purInvoice.amount.replace(/\D/g, '');
		    if(this.purInvoice.amount ==0){
			      this.purInvoice.amount = '';
		   }
    },
    //表格区分开票状态
    filterInvoicestatus(value, row) {
          return row.invoicestatus === value;
      },

    //表格区分付款状态
      filterPaystatus(value, row) {
          return row.orderstatus === value;
      },
    
    //表格区分入库状态
      filterOrderstatus(value, row) {
          return row.orderstatus === value;
      },
      //表格下拉箭头筛选已入库和未入库
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },

    

    //模态框关闭执行
    closeDialog() {
      //清空数据
      this.purInvoice = { supplier:{sid:null}, purGoods:{gid:null}};
      //清空前端验证提示
    },

    //条件查询操作
    getAllInvoiceButton() {
      this.pageIndex = 1;
      this.pageSize = 5;
      this.getAllInvoice();
    },

    //重置按钮
    reset() {
      this.purOrderVO={supplier:{sid:null}};
      this.getAllInvoice();
    },

    //编辑采购付款信息
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.dialogFormTitle = "编辑采购发票";
      //浅拷贝，将row行的数据拷贝到smapleModify中
      this.purInvoice = { ...row };
    },

     //编辑采购发票单
    modifyPay() {
        this.dialogFormVisible = false;
        
        this.purInvoice.invoicenum = this.generateInvoiceNumber;
          
        this.$axios.post("/purinvoice/modifyInvoiceList", this.purInvoice).then((resp) => {
        if (resp.data.code == 200) {
          alert("编辑成功");
          //起到刷新页面的作用
          this.getAllInvoice();
        }else {
          //this.$message(JSON.stringify(resp.data.msg));
          this.$message("该商品处于未付款状态，不能进行开发票操作");
        }
        });
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //条件查询订单
    onSubmit() {
      this.pageIndex = 1;
      this.getAllInvoice();
    },

    //查询所有采购付款
    getAllInvoice() {
      this.$axios.post("/purinvoice/getInvoiceList/" + this.pageIndex + "/" + this.pageSize,this.purOrderVO)
        .then((resp) => {
          if(resp.data.code==200){
            this.pageBean = resp.data.data;
          }
        });
    },
    //查询所有商品
     getAllPurGoods() {
      this.$axios.get("/purgoods/findAll").then((resp) => {
        this.purGoodss = resp.data.data;
      });
    },
    //查询所有供应商
    getAllSupplier() {
      this.$axios.get("/supplier/findAll").then((resp) => {
        this.suppliers = resp.data.data;
      });
    },
    
    //分页，连续的序号
    Nindex(index) {
      // 当前页数 - 1 * 每页数据条数 + 1
      const pageIndex = this.pageIndex // 当前页码
      const pageSize = this.pageSize // 每页条数
      return index + 1 + (pageIndex - 1) * pageSize
    },
    //每页显示几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllInvoice();
    },

    //显示第几页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getAllInvoice();
    },
  },
};
</script>

<style>

</style>